<template>
      <div id="mountNode"></div>
</template>
<script>
import G6 from "@antv/g6/build/g6";
export default{
    data(){
        return{
            gData:{},
            height: document.documentElement.clientHeight-10,
            width:document.documentElement.clientWidth-205,
        }
    },
    created(){
        
    },
    mounted(){
         this.$nextTick(() => {
            this.init();
            });
    },
    methods:{
        init(){
            //图实例化时，至少需要为图设置容器、宽、高：
            // const graph = new G6.Graph({
            //     container: 'mountNode', // 指定挂载容器
            //     width: this.width,             // 图的宽度
            //     height: this.height             // 图的高度
            // });

/*
由于 G6 在读取数据时，发现了数据中带有位置信息（x 和 y），就会按照该位置信息进行绘制，这是为了满足按照原始数据绘制的需求设计的。但为优化超出屏幕到问题，G6 提供了图的两个相关配置项：
fitView：设置是否将图适配到画布中；
fitViewPadding：画布上四周的留白宽度。
*/ 
            const graph = new G6.Graph({
                container: 'mountNode', // 指定挂载容器
                width: this.width,             // 图的宽度
                height: this.height,             // 图的高度
                fitView: true,              //设置是否将图适配到画布中；
                fitViewPadding: [ 20, 40, 50, 20 ] //画布上四周的留白宽度。
            });


            //数据的加载和图的渲染是两个步骤，可以分开进行。
            const main = async () => {
                const response = await fetch('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json');
                const remoteData = await response.json();
                
                // ...
                graph.data(remoteData); // 加载远程数据
                graph.render();         // 渲染
            };
            main(); 
        }
    }
}
</script>
